<template>
  <div>
    <RegisterHeader />
    <LayoutWidth>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="商品信息" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="单价"></el-table-column>
        <el-table-column prop="name" label="地址" show-overflow-tooltip></el-table-column>
        <el-table-column prop="name" label="金额" ></el-table-column>
        <el-table-column prop="name" label="操作" ></el-table-column>
      </el-table>
      <div class="shop-end">
         <el-button type="primary">结算</el-button>
      </div>
    </LayoutWidth>
  </div>
</template>
<script>
import RegisterHeader from "../Register/Register-Header";
import LayoutWidth from "@/components/Layout-width";
export default {
  components: {
    RegisterHeader,
    LayoutWidth
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.shop-end {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
</style>